<template>
  <div id="app" class="counter-warp">
    <div class="tqybgz"  @click="showSc">选择城市◢</div>
    <div class="solrcity">
      <input v-model="city" class="solrcity1" />
    </div>
    <div class="butsel">
      <button class="butsel1" @click="solrCity()">搜索</button>
    </div>

    <div class="cityselect">
      <div  class="c2" v-bind:class="{ hidiv : ishid }">
        <ul>
            <li v-for="(sc, index) in citys" :key="index" class="c2li">
                <div  @click="changeCity(sc)">{{ sc }}</div>
            </li>
          </ul>
        </div>
    </div>

    <div class="contentdiv">
      <ul>
        <li v-for="(tq, index) in tqs" :key="index">
            <div v-if="index >= 1">
              <div class="d1cls">
                <div class="rqcls"><span class="daspancls">{{ tq.date }}</span>  {{ tq.type }}</div>
                <div class="lxcls">
                  <div v-if="tq.type == '小雨'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/dabaoyu.png"/>
                  </div>
                  <div v-if="tq.type == '多云'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/duoyun.png"/>
                  </div>
                  <div v-if="tq.type == '阴'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/yintian.png"/>
                  </div>
                  <div v-if="tq.type == '中雨'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/dabaoyu.png"/>
                  </div>
                  <div v-if="tq.type == '晴'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/qinglang.png"/>
                  </div>
                  <div v-if="tq.type == '阵雨'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/dabaoyu.png"/>
                  </div>
                  <div v-if="tq.type == '大雪'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/daxue.png"/>
                  </div>
                  <div v-if="tq.type == '小雪'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/daxue.png"/>
                  </div>
                  <div v-if="tq.type == '雨夹雪'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/yuxue.png"/>
                  </div>
                  <div v-if="tq.type == '雾'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/duoyun.png"/>
                  </div>
                  <div v-if="tq.type == '大雨'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/dabaoyu.png"/>
                  </div>
                  <div v-if="tq.type == '小到中雨'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/xiaoyu.png"/>
                  </div>
                </div>
              </div>
              <div class="d2cls">
                <div  class="flcls">风力：{{ tq.fengli }}</div>
                <div class="fxcls">风向：{{ tq.fengxiang }}</div>
                <div class="gwcls">{{ tq.high }}</div>
                <div class="dwcls">{{ tq.low }}</div>
              </div>
            </div>
            <div v-else>
              <div class="d3cls">
                <div class="rqcls"><span class="daspancls">{{ tq.date }}</span>  {{ tq.type }}     {{ wendu }}℃</div>
                <div class="lxcls">
                  <div v-if="tq.type == '小雨'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/dabaoyu.png"/>
                  </div>
                  <div v-if="tq.type == '多云'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/duoyun.png"/>
                  </div>
                  <div v-if="tq.type == '阴'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/yintian.png"/>
                  </div>
                  <div v-if="tq.type == '中雨'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/dabaoyu.png"/>
                  </div>
                  <div v-if="tq.type == '晴'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/qinglang.png"/>
                  </div>
                  <div v-if="tq.type == '阵雨'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/dabaoyu.png"/>
                  </div>
                  <div v-if="tq.type == '大雪'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/daxue.png"/>
                  </div>
                  <div v-if="tq.type == '小雪'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/daxue.png"/>
                  </div>
                  <div v-if="tq.type == '雨夹雪'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/yuxue.png"/>
                  </div>
                  <div v-if="tq.type == '雾'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/duoyun.png"/>
                  </div>
                  <div v-if="tq.type == '大雨'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/dabaoyu.png"/>
                  </div>
                  <div v-if="tq.type == '小到中雨'">
                    <img class="tpimg" src="http://qiniuyun.bblog.site/xiaoyu.png"/>
                  </div>
                </div>
                <div class="tips">
                  <div class="dcdivcls">
                    <img class="dcimg" src="http://qiniuyun.bblog.site/doctor.png"/>
                  </div>
                  <div class="gmcls">{{ ganmao }}</div>
                </div>
              </div>
              <div class="d2cls">
                <div  class="flcls">风力：{{ tq.fengli }}</div>
                <div class="fxcls">风向：{{ tq.fengxiang }}</div>
                <div class="gwcls">{{ tq.high }}</div>
                <div class="dwcls">{{ tq.low }}</div>
              </div>
            </div>
        </li>
      </ul>
    </div>
    <div class="clearfloat"></div>
    <!-- <div class="advordiv">
      <img class="advorimg" src="http://qiniuyun.bblog.site/ssy.png"/>
    </div> -->
  </div>
</template>

<script>
import { requestPost } from '@/utils/index'
export default {
  data () {
    return {
      tqs: [],
      city: '广州',
      ganmao: '*****************************',
      wendu: '',
      api: '',
      ishid: true,
      citys: ['北京', '东莞', '广州', '中山', '深圳', '惠州', '江门', '珠海', '汕头', '佛山', '湛江', '河源', '肇庆', '潮州', '清远', '韶关', '揭阳', '阳江', '云浮', '茂名', '梅州', '汕尾', '济南', '青岛', '临沂', '济宁', '菏泽', '烟台', '泰安', '淄博', '潍坊', '日照', '威海', '滨州', '东营', '聊城', '德州', '莱芜', '枣庄', '苏州', '徐州', '盐城', '无锡', '南京', '南通', '连云港', '常州', '扬州', '镇江', '淮安', '泰州', '宿迁', '郑州', '南阳', '新乡', '安阳', '洛阳', '信阳', '平顶山', '周口', '商丘', '开封', '焦作', '驻马店', '濮阳', '三门峡', '漯河', '许昌', '鹤壁', '济源', '松江区', '宝山区', '金山区', '嘉定区', '南汇区', '青浦区', '浦东新区', '奉贤区', '闵行区', '徐汇区', '静安区', '黄浦区', '普陀区', '杨浦区', '虹口区', '闸北区', '长宁区', '崇明县', '卢湾区', '石家庄', '唐山', '保定', '邯郸', '邢台', '河北区', '沧州', '秦皇岛', '张家口', '衡水', '廊坊', '承德', '温州', '宁波', '杭州', '台州', '嘉兴', '金华', '湖州', '绍兴', '舟山', '丽水', '衢州', '西安', '咸阳', '宝鸡', '汉中', '渭南', '安康', '榆林', '商洛', '延安', '铜川', '长沙', '邵阳', '常德', '衡阳', '株洲', '湘潭', '永州', '岳阳', '怀化', '郴州', '娄底', '益阳', '张家界', '湘西州', '江北区', '渝北区', '沙坪坝区', '九龙坡区', '万州区', '永川', '南岸区', '酉阳县', '北碚区', '涪陵区', '秀山县', '巴南区', '渝中区', '石柱县', '忠县', '合川', '大渡口区', '开县', '长寿区', '荣昌县', '云阳县', '梁平县', '潼南县', '江津', '彭水县', '璧山县', '綦江县', '大足县', '黔江区', '巫溪县', '巫山县', '垫江县', '丰都县', '武隆县', '万盛区', '铜梁县', '南川', '奉节县', '双桥区', '城口县', '漳州', '泉州', '厦门', '福州', '莆田', '宁德', '三明', '南平', '龙岩', '和平区', '北辰区', '河北区', '河西区', '西青区', '津南区', '东丽区', '武清区', '宝坻区', '红桥区', '大港区', '汉沽区', '静海县', '宁河县', '塘沽区', '蓟县', '南开区', '河东区', '昆明', '红河州', '大理州', '文山州', '德宏州', '曲靖', '昭通', '楚雄州', '保山', '玉溪', '丽江', '临沧', '思茅', '西双版纳', '怒江州', '迪庆州', '成都', '绵阳', '广元', '达州', '南充', '德阳', '广安', '阿坝州', '巴中', '遂宁', '内江', '凉山州', '攀枝花', '乐山', '自贡', '泸州', '雅安', '宜宾', '资阳', '眉山', '甘孜州', '贵港', '玉林', '北海', '南宁', '柳州', '桂林', '梧州', '钦州', '来宾', '河池', '百色', '贺州', '崇左', '防城港', '芜湖', '合肥', '六安', '宿州', '阜阳', '安庆', '马鞍山', '蚌埠', '淮北', '淮南', '宣城', '黄山', '铜陵', '亳州', '池州', '巢湖', '滁州', '三亚', '海口', '琼海', '文昌', '东方', '昌江县', '陵水县', '乐东县', '五指山', '保亭县', '澄迈县', '万宁', '儋州', '临高县', '白沙县', '定安县', '琼中县', '屯昌县', '南昌', '赣州', '上饶', '吉安', '九江', '新余', '抚州', '宜春', '景德镇', '萍乡', '鹰潭', '武汉', '宜昌', '襄樊', '荆州', '恩施州', '孝感', '黄冈', '十堰', '咸宁', '黄石', '仙桃', '随州', '天门', '荆门', '潜江', '鄂州', '太原', '大同', '运城', '长治', '晋城', '忻州', '临汾', '吕梁', '晋中', '阳泉', '朔州', '大连', '沈阳', '丹东', '辽阳', '葫芦岛', '锦州', '朝阳', '营口', '鞍山', '抚顺', '阜新', '本溪', '盘锦', '铁岭', '台北', '高雄', '台中', '新竹', '基隆', '台南', '嘉义', '黑龙江', '齐齐哈尔', '哈尔滨', '大庆', '佳木斯', '双鸭山', '牡丹江', '鸡西', '黑河', '绥化', '鹤岗', '伊春', '大兴安岭', '七台河', '赤峰', '包头', '通辽', '呼和浩特', '乌海', '鄂尔多斯', '呼伦贝尔', '兴安盟', '贵阳', '黔东南州', '黔南州', '遵义', '黔西南州', '毕节', '铜仁', '安顺', '六盘水', '兰州', '天水', '庆阳', '武威', '酒泉', '张掖', '陇南', '白银', '定西', '平凉', '嘉峪关', '金昌', '甘南州', '西宁', '海西州', '海北州', '果洛州', '玉树州', '乌鲁木齐', '伊犁州', '昌吉州', '石河子', '拉萨', '山南', '林芝', '日喀则', '阿里', '昌都', '那曲', '吉林', '长春', '白山', '白城', '延边州', '松原', '辽源', '通化', '四平', '银川', '吴忠', '中卫', '石嘴山', '固原']}
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: '天气预报'
    })
    this.tqs = []
    this.getwather()
  },
  methods: {
    showSc () {
      if (this.ishid) {
        this.ishid = false
      } else {
        this.ishid = true
      }
    },
    changeCity (sc) {
      this.city = sc
      this.tqs = []
      this.getwather()
      this.ishid = true
    },
    solrCity () {
      this.tqs = []
      this.getwather()
      this.ishid = true
    },
    getwather () {
      var that = this
      var url = wx.getStorageSync('requestUrl') + '/api/getwather'
      var data = {
        'obj': { 'city': this.city }
      }
      requestPost(url, data, 'POST').then(function (value) {
        // <![CDATA[<3级]]>
        that.ganmao = value.data.ganmao
        that.wendu = value.data.wendu
        that.api = value.data.api
        for (var ele of value.data.forecast) {
          ele.fengli = ele.fengli.substring(9, ele.fengli.length - 3)
          that.tqs.push(ele)
        }
      }, function (value) {
        console.log(value)
      })
    }
  }
}
</script>

<style>
html,body,#app {
  background-color:rgba(62, 62, 255, 0.322);
}
.clearfloat{
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0px;
}
.counter-warp {
  text-align: center;
}
.c1{
  width: 100%;
  height: auto;
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color:rgb(179, 179, 250);
  text-align: center;
  font-size: 23px;
}
.c2{
  width: 100%;
  height: auto;
  float: left;
  background-color:rgb(250, 250, 253);
}
.c2li{
  padding-top: 5px;
  padding-bottom: 5px;
  width: 20%;
  height: auto;
  float: left;
  text-align: center;
}
.tqybgz{
  width: 25%;
  height: 30px;
  float: left;
  margin-top: 10px;
}
.solrcity{
  width: 50%;
  height: 30px;
  float: left;
  margin-top: 10px;
}
.solrcity1{
  width: 95%;
  height: 20px;
  border: 1px solid rgba(141, 141, 141, 0.911);
  border-radius: 5px 5px 5px 5px;
}
.butsel{
  width: 20%;
  height: 30px;
  line-height: 20px;
  float: left;
  margin-top: 10px;
}
.butsel1{
  width: 100%;
  height: 25px;
  line-height: 25px;
}
.cityselect{
  width: 100%;
  float: left;
}
.contentdiv{
  width: 100%;
  float: left;
}
.d1cls{
  width: 100%;
  float: left;
}
.d2cls{
  width: 100%;
  background-color:rgba(62, 62, 255, 0.425);
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
}
.d3cls{
  width: 100%;
  float: left;
  margin-top: 10px;
}
.hidiv{
  display: none;
}
.rqcls{
  font-size: 22px;
  height: 60px;
  line-height: 60px;
  width: 74%;
  float: left;
  text-align: left;
}

.tpimg{
  width: 45px;
  height: 45px;
}
.lxcls{
  width: 25%;
  height: 60px;
  padding-top: 10px;
  float: left;
  text-align: center;

}
.tips{
  width:100%;
  text-align: center;
  margin-bottom: 10px;
}
.dcdivcls{
  width:10%;
  height: 25px;
  float: left;
  text-align: right;
}
.dcimg{
  width: 30px;
  height: 30px;
}
.gmcls{
  width:95%;
  font-size: 13px;
  text-align-last: left;
}
.flcls, .fxcls, .gwcls, .dwcls{
  font-size: 13px;
  width: 25%;
  float: left;
  text-align: center;
  white-space:nowrap;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  overflow: hidden;
}
.daspancls{
  margin-right: 20px;
  padding: 8px;
  background-color:rgba(209, 248, 116, 0.466);
  font-size: 16px;
}
.advordiv{
  width:100%;
  height: 160px;
  float: left;
}
.advorimg{
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

</style>
